<template>
  <div>
    <div>
      <van-tabbar v-model="active" active-color="red">
        <van-tabbar-item
          v-for="nav in footernav"
          :key="nav.id"
          :icon="nav.icon"
          :url="nav.url"
          >{{ nav.name }}</van-tabbar-item
        >
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Tabbar, TabbarItem } from 'vant';

Vue.use(Tabbar);
Vue.use(TabbarItem);

export default {
  created(){
    let currentPath = this.$route.path;
    this.index = this.footernav.findIndex(item=>item.url==='#'+currentPath)
    this.$store.commit('changeActive',this.index)
  },
  computed:{
    active:{
      get(){
        return this.$store.state.active
      },
      set(){
        this.$store.commit('changeActive',this.index)
      }
    }
  },
  data() {
    return {
      index:0,
      footernav: [
        {
          name: "电影",
          id: 1,
          icon: "video-o",
          url: "#/movie",
        },
        {
          name: "影院",
          id: 2,
          icon: "vip-card-o",
          url: "#/cinema",
        },
        {
          name: "资讯",
          id: 3,
          icon: "comment-o",
          url: "#/news",
        },
        {
          name: "我的",
          id: 4,
          icon: "contact",
          url: "#/my",
        },
      ],
    };
  },
  methods: {},
};
</script>

<style>
</style>
